<template>
  <div>
    <!-- 头部 -->
    <div class="search_top">
      <router-link tag="div" to="/search" class="right">
        <span class="iconfont icon-sousuo"></span>
        <input type="text" placeholder="不科学御兽" @keyup.enter="jump" v-model="this.$route.query.user" />
      </router-link>
      <p @click="$router.go(-1)">取消</p>
    </div>

    <!-- 选项 -->
    <div class="search-filter">
      <ul>
        <li class="con">人气</li>
        <li>时间</li>
        <li>字数</li>
        <li>收藏</li>
        <li>推荐</li>
        <li>点击</li>
      </ul>
      <p>
        <span class="iconfont icon-shaixuan"></span>
        <span>筛选</span>
      </p>
    </div>

    <!-- 书籍 -->
    <div class="search_content">
      <div class="search_lists">
        <router-link tag="div" :to="'/details?id='+item.id" class="search_item" v-for="item in seaech_lists_two" :key="item.id">
          <div class="img">
            <img
              :src="item.img"
              alt=""
            />
          </div>
          <div class="text">
            <div class="text_top">{{item.name}}</div>
            <div class="text_middle">
                {{item.brief}}
            </div>
            <div class="text_bottom">
              <div class="text_bottom_left">
                <span class="iconfont icon-bianzu15"></span>
                <span>{{item.author}}</span>
              </div>
              <div class="text_bottom_right">
                <span>{{item.type}}</span>
                <span>{{item.state}}</span>
                <span>{{item.wordage}}</span>
              </div>
            </div>
          </div>
        </router-link>
      </div>
    </div>

    <p class="tips">{{tips}}</p>
  </div>
</template>

<script>
import {getbook_dataData} from "../api/home.js"
export default {
    data() {
        return {
            search_lists: null,
            value:this.$route.query.user,
            seaech_lists_two:null,
            tips:null,
        };
    },
    methods:{
        see_data(){
          getbook_dataData().then((data)=>{
                this.search_lists = data.data;
                this.seaech_lists_two = data.data.filter((item)=>{
                  return item.name.includes(this.value);
                });
                if(this.seaech_lists_two.length == 0) {
                  this.tips = "暂无此书，你再次搜索!!!"
                }
                // console.log(this.seaech_lists_two);
            })
        },
    },
    created(){
        this.see_data();
    },

};
</script>

<style lang="scss" scoped>
.tips {
  text-align: center;
  font-size: 14px;
  color: #969ba3;
  position: absolute;
  left: 0;
  top: 184px;
  right: 0;
  margin: auto;
}

// 书籍
.search_content {
  .search_lists {
    .search_item {
      display: flex;
      padding: 15px;
      padding-left: 0;
      margin-left: 15px;
      font-size: 12px;
      border-bottom: 1px solid #e7e7ea;
      .img {
        width: 66px;
        height: 88px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        flex: 1;
        margin-left: 6px;
        .text_top {
          color: black;
          background-color: transparent;
          font-size: 16px;
          font-weight: 600;
        }
        .text_middle {
          font-size: 14px;
          color: #969ba3;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          margin: 6px 0;
        }
        .text_bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .text_bottom_left {
                color: #969ba3;
                font-size: 14px;
                span {
                    &:nth-child(1) {
                        margin-right: 2px;
                    }
                }
            }
            .text_bottom_right {
                font-size: 10px;
                display: flex;
                align-items: center;
                margin-top: 2px;
                span {
                    &:nth-child(1) {
                        color: #969ba3;
                        border: 1px solid #969ba3;
                        margin-right: 4px;
                    }
                    &:nth-child(2) {
                        color: #ed424b;
                        border: 1px solid #ed424b;
                        margin-right: 4px;
                    }
                    &:nth-child(3) {
                        color: #4284ed;
                        border: 1px solid #4284ed;
                    }
                }
            }
        }
      }
      &:nth-child(1) {
        .text {
            .text_top {
                color: #ed424b;
            }
        }
      }
    }
  }
}

// 选项
.search-filter {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  ul {
    display: flex;
    flex: 1;
    justify-content: space-around;
    padding: 5px 0;
    li {
      color: #969ba3;
      padding: 2px 6px;
      font-size: 14px;
      &.con {
        border: 1px solid #ed424b;
        color: #ed424b;
        border-radius: 12px;
      }
    }
  }
  p {
    display: flex;
    margin-left: 10px;
    flex-direction: column;
    font-size: 12px;
    justify-items: center;
    align-items: center;
    color: #ed424b;
  }
}

// 头部
.search_top {
  display: flex;
  padding: 10px 15px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f6f7f9;
  .right {
    flex: 1;
    height: 32px;
    line-height: 32px;
    background-color: #f6f7f9;
    display: flex;
    align-items: center;
    border: 2px solid rgb(229, 151, 0);
    span {
      text-indent: 8px;
    }
    input {
      border: none;
      background-color: #f6f7f9;
      font-size: 14px;
      text-indent: 4px;
    }
  }
  p {
    font-size: 14px;
    margin-left: 15px;
  }
}
</style>
